<template lang="pug">
  div.progress-view
    div.label {{ label }}
    div.progress-wrap
      div.progress-bar(:style="`width: ${width};background-color: ${color};`")
      div.progress-num {{ rate }}%
</template>

<script>
export default {
  name: "ProgressView",
  props: {
    label: String,
    rate: [Number, String],
    color: {
      type: String,
      default: '#FFFFFF',
    }
  },
  computed: {
    width() {
      const rate = Number(this.rate);
      return `${(rate > 100) ? 100 : rate}%`;
    }
  }
}
</script>

<style lang="scss" scoped>
.progress-view{
  display: flex;
  align-items: center;
  //padding: rem(14) 0;
  .label{
    width: rem(100);
    font-size: rem(16);
    line-height: rem(16);
    color: #698B95;
  }
  .progress-wrap{
    flex: 1;
    display: flex;
    align-items: center;
    .progress-bar{
      height: rem(8);
      border-radius: rem(4);
    }
    .progress-num{
      font-size: rem(16);
      line-height: rem(16);
      color: #698B95;
      width: rem(60);
      text-align: right;
    }
  }
}
</style>
